<template>
  <sweet-button @click="changeChartData">修改值</sweet-button>
  <sweet-liquidfill-chart :series="series" width="500px"></sweet-liquidfill-chart>
  <!-- <sweet-liquidfill-chart :series="series1" width="700px"></sweet-liquidfill-chart> -->
</template>
<script setup>
import {ref} from 'vue';
import * as echarts from 'echarts';

const seriesStyle = {
  itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {offset: 0, color: 'orange'},
      {offset: 1, color: 'rgba(54,107,252,0.8)'}
    ]),
    opacity: 0.78,
    shadowBlur: 10
  },
  backgroudStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {offset: 0, color: 'rgb(140 171 103)'},
      {offset: 1, color: 'rgb(81 111 46 / 80%)'}
    ]),
    opacity: 0.5
  }
};

const width = '700px';
const series = ref([{data: [0.29]}]);
const series1 = ref([{...seriesStyle, data: [0.29]}]);

const changeChartData = () => {
  series.value = [{data: [Number(Math.random().toFixed(2))]}];
  series1.value = [{...seriesStyle, data: [Number(Math.random().toFixed(2))]}];
};
</script>
